<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="com.sx.pojo.Person" %>
<%@ taglib prefix="c" uri="jakarta.tags.core" %>

<head>
    <!-- 引入 Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <!-- 引入 SweetAlert2 的 CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.7.3/dist/sweetalert2.min.css">
    <style>
        /* 整体页面背景设置为更柔和的天蓝色调，营造简洁科技感 */
        body {
            font-family: 'Roboto', Arial, sans-serif;
            background-color: #eaf3f9; /* 更柔和的蓝色背景 */
            margin: 0;
            padding: 0;
            color: #333;
        }

        /* 页面主容器，设置宽度、居中、内边距、背景色及轻微阴影效果 */
        .main-container {
            width: 90%;
            margin: 50px auto;
            padding: 40px;
            background-color: #f8f9fa; /* 更柔和的容器背景色 */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); /* 更淡的阴影效果 */
            border-radius: 10px; /* 减小圆角 */
        }

        /* 标题样式，字体大小、加粗、颜色及下边距 */
        h1 {
            font-size: 36px;
            font-weight: bold;
            color: #1976D2; /* 稍深的蓝色标题 */
            margin-bottom: 30px;
        }

        /* 表格容器，设置相对定位方便内部元素定位 */
        .table-container {
            position: relative;
        }

        /* 表格样式，紧凑布局、边框、背景色及文本颜色 */
        table {
            width: 100%;
            border-collapse: collapse;
            border: 1px solid #e0e0e0; /* 更淡的边框颜色 */
            background-color: #f9f9f9; /* 更淡的表格背景色 */
            color: #333;
        }

        /* 表头样式，背景色、文字颜色、内边距、边框及轻微阴影 */
        thead th {
            background-color: #1976D2; /* 稍深的蓝色表头背景 */
            color: #ffffff; /* 白色表头文字 */
            padding: 18px; /* 适当增加内边距 */
            border: 1px solid #e0e0e0; /* 更淡的边框颜色 */
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* 更淡的阴影效果 */
            text-align: center; /* 表头内容居中 */
        }

        /* 表格数据单元格样式，内边距、边框及鼠标悬停时的背景色变化 */
        tbody td {
            padding: 18px; /* 适当增加内边距 */
            border: 1px solid #e0e0e0; /* 更淡的边框颜色 */
            transition: background-color 0.3s ease;
            font-size: 18px; /* 增大字体大小 */
            text-align: center; /* 表格数据内容居中 */
        }

        tbody td:hover {
            background-color: #e6e6e6;
        }

        /* 偶数行变色效果 */
        tbody tr:nth-child(even) {
            background-color: #f5f5f5; /* 更淡的偶数行背景色 */
        }

        /* 操作列样式，文本居中 */
        .operation {
            text-align: center;
        }

        /* 操作按钮通用样式，去除下划线、内边距、圆角、字体大小、
        颜色及过渡效果 */
        .operation a {
            text-decoration: none;
            padding: 12px 24px; /* 增大内边距 */
            border-radius: 5px;
            font-size: 16px; /* 增大字体大小 */
            color: white;
            transition: background-color 0.3s ease;
            margin-right: 10px; /* 适当调整间距 */
            display: inline-block;
        }

        /* 修改按钮样式，浅蓝色背景 */
        .operation a.update-link {
            background-color: #00bfff; /* 更淡的浅蓝色背景 */
        }

        /* 删除按钮样式，浅红色背景 */
        .operation a.delete-link {
            background-color: #ff6347; /* 更淡的浅红色背景 */
        }

        /* 按钮悬停效果，降低透明度 */
        .operation a:hover {
            opacity: 0.8;
        }

        /* 添加按钮样式，与整体风格协调，深蓝色背景 */
        .add-button {
            display: inline-block;
            text-decoration: none;
            padding: 12px 24px; /* 增大内边距 */
            border-radius: 5px;
            font-size: 18px; /* 增大字体大小 */
            color: white;
            background-color: #1565C0; /* 稍深的蓝色背景 */
            transition: background-color 0.3s ease;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 更淡的阴影效果 */
        }

        .add-button:hover {
            opacity: 0.8;
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15); /* 更淡的阴影效果 */
        }
    </style>
</head>
<body>
<div class="main-container">
    <h1>人员信息列表</h1>
    <div class="table-container">
        <a href="person.action?action=add" class="add-button">添加员工</a>
        <table>
            <thead>
            <tr>
                <th>员工ID</th>
                <th>密码</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>权限等级</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <c:forEach items="${personList}" var="person">
                <tr>
                    <td>${person.id}</td>
                    <td>${person.password}</td>
                    <td>${person.name}</td>
                    <td>${person.age}</td>
                    <td>
                        <c:if test="${person.authorityLevel == 1}">
                            <span style="color: green;">管理员</span>
                        </c:if>
                        <c:if test="${person.authorityLevel == 2}">
                            <span style="color: orange;">普通员工</span>
                        </c:if>
                    </td>
                    <td class="operation">
                        <a href="person.action?action=update&id=${person.id}" class="update-link">修改</a>
                        <a href="#" class="delete-link"
                           data-id="${person.id}" onclick="return confirmDelete(this);">删除</a>
                    </td>
                </tr>
            </c:forEach>
            </tbody>
        </table>
    </div>
</div>

<!-- 引入 jQuery -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<!-- 引入 Bootstrap JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- 引入 SweetAlert2 的 JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.7.3/dist/sweetalert2.min.js"></script>
<script>
    function confirmDelete(link) {
        Swal.fire({
            title: '确定要删除吗？',
            text: "此操作不可撤销！",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonText: '取消',
            confirmButtonText: '确定'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    type: "GET",
                    url: "/person.action?action=delete&id=" + link.getAttribute("data-id"),
                    success: function (response) {
                        if (response.status === "success") {
                            Swal.fire({
                                icon: 'success',
                                title: '成功',
                                text: response.message
                            }).then(() => {
                                // 刷新到指定页面，例如 index.html
                                location.reload();
                            });
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: '失败',
                                text: response.message
                            });
                        }
                    },
                    error: function (xhr, status, error) {
                        Swal.fire({
                            icon: 'error',
                            title: '请求出错',
                            text: '出现网络问题或服务器错误，请稍后再试'
                        });
                    }
                });
            }
        });
        return false;
    }
</script>